<template>
      <div class="min-h serveProject bg-wt">
        <div class="baseList">
          <div class="tableBoxs">
            <t-space direction="vertical">
            <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
              <t-table
                row-key="index"
                :data="data"
                :columns="COLUMNS"
                :stripe="stripe"
                :bordered="bordered"
                :hover="hover"
                :table-layout="tableLayout ? 'auto' : 'fixed'"
                :size="size"
                :pagination="pagination"
                :show-header="showHeader"
                cell-empty-content="-"
                resizable
                lazy-load
                @row-click="handleRowClick">

                  <!-- 图片预览及展示 -->
                  <template #image="{ row }">
                    <div class="tdesign-demo-image-viewer__base">
                      <t-image-viewer :images="[row.image]">
                        <template #trigger="{ open }">
                          <div class="tdesign-demo-image-viewer__ui-image">
                            <img
                              alt="test"
                              :src="row.image"
                              class="tdesign-demo-image-viewer__ui-image--img"
                            />
                            <div
                              class="tdesign-demo-image-viewer__ui-image--hover"
                              @click="open"
                            >
                              <span><BrowseIcon size="1.4em" /> 预览</span>
                            </div>
                          </div>
                        </template>
                      </t-image-viewer>
                    </div>
                  </template>
                  <!--处理价格展示-->
                  <template #price="{row}">
                    {{isDecimals(row.price)?row.price:row.price+'.00'}}
                  </template>

              </t-table>
            </t-space>
          </div>
        </div>
      </div>
</template>

<script setup lang="jsx">
import { ref } from 'vue'
import {
  ErrorCircleFilledIcon,
  CheckCircleFilledIcon,
  CloseCircleFilledIcon
} from 'tdesign-icons-vue-next'

import { COLUMNS } from './constants.ts'

const statusNameListMap = {
  0: { label: '审批通过', theme: 'success', icon: <CheckCircleFilledIcon /> },
  1: { label: '审批失败', theme: 'danger', icon: <CloseCircleFilledIcon /> },
  2: { label: '审批过期', theme: 'warning', icon: <ErrorCircleFilledIcon /> }
}
const data = []
const total = 28
for (let i = 0; i < total; i++) {
  data.push({
    "id": "2",
    "createTime": "2023-09-26 15:09:46",
    "createDay": null,
    "updateTime": "2023-09-26 15:09:46",
    "createBy": "1671403256519078153",
    "updateBy": null,
    "dataState": null,
    "remark": null,
    "createType": null,
    "creator": null,
    "adminCreator": null,
    "updater": null,
    "name": "复健运动",
    "orderNo": 2,
    "unit": "次",
    "price": 50.01,
    "image": "https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/e4610f16-0612-43a0-a595-b4b778d4b430.jpg",
    "nursingRequirement": "根据患者的需要，执行定制的康复运动计划，旨在改善身体机能和增强肌肉力量",
    "status": 1,
    "count": null
  })
}

const stripe = ref(true)
const bordered = ref(true)
const hover = ref(false)
const tableLayout = ref(false)
const size = ref('medium')
const showHeader = ref(true)

//判断数据是否包含小数点
const isDecimals =(val)=>{
  if (String(val).includes('.')>-1) {
    return true;
  }
  return false;
}

const handleRowClick = (e) => {
  console.log(e)
}

const pagination = {
  defaultCurrent: 1,
  defaultPageSize: 5,
  total
}
</script>
